<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name='author' content='白水' />
    <meta name='description' content='一个简单的静态网页' />
    <title>Whitewater_blog</title>
</head>

<body>
    <header>
        <img src="./pic/head.png" alt="图片">
    </header>
    <nav>
        <ul>
            <li><a href="#html1"><span class="middle">Html相关</span></a></li>
            <li><a href="#css1"><span class="middle">CSS相关</span></a></li>
            <li><a href="#js1"><span class="middle">Js相关</span></a></li>
            <li><a href="#vue1"><span class="middle">Vue相关</span></a></li>
        </ul>
    </nav>
    <section>
        <div id="html1">
            <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

                您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

                在本教程中，您将学习如何使用 HTML 来创建站点。

                HTML 很容易学习！相信您能很快学会它！</p>
        </div>
        <div id="css1">
            <p>CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

                通过使用 CSS 我们可以大大提升网页开发的工作效率！

                在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

                CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。</p>
        </div>
        <div id="js1">
            <p>JavaScript 是 Web 的编程语言。

                所有现代的 HTML 页面都可以使用 JavaScript。

                JavaScript 非常容易学。

                本教程将教你学习从初级到高级 JavaScript 知识。</p>
        </div>
        <div id="vue1">
            <p>Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

                Vue 只关注视图层， 采用自底向上增量开发的设计。

                Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

                Vue 学习起来非常简单，本教程基于 Vue3 以上版本测试。</p>
        </div>
    </section>
    <footer>一个简单的静态网页——白水</footer>

</body>
<style>
    /* head */
    img {
        width: 100%;
    }

    /* nav */
    a:link,
    a:visited {
        display: block;
        text-decoration: none;
        background-color: rgb(228, 92, 14);
        font-weight: bold;
        color: rgb(229, 229, 229);
        text-align: center;
        height: 4em;
        border-radius: 10px 10px 0px 0px;
    }

    a:hover,
    a:active {
        text-decoration: none;
        background-color: rgb(174, 69, 8);
        color: rgb(255, 255, 255);
    }

    li {
        float: left;
        width: 24%;
        list-style-type: none;
        margin: 1% 0.5% 0px 0.5%;
        cursor: pointer;
    }

    .middle {
        line-height: 4em;
        /* html相关...垂直居中 */
    }

    /* section */
    section {
        height: 100vh;
        clear: both;
        background-color: rgb(234, 213, 194);
    }

    p {
        height: 20vh;
        width: 98vw;
        margin: 1em auto;
        background-color: white;
        opacity: 0.7;
    }

    /* footer */
    footer {
        clear: both;
        text-align: center;
        color: gray;
        height: 20px;
        background-color: beige;
    }

    /* 初始化 */
    * {
        padding: 0px;
        margin: 0px;
    }

    body {
        background-color: rgb(234, 213, 194);
    }
    /* 网页右侧滚动条 */
    html::-webkit-scrollbar {
        width: 15px;
    }

    html::-webkit-scrollbar-track {
        background-color: rgb(234, 203, 175);
        border-radius: 10px;
    }

    html::-webkit-scrollbar-thumb {
        background: rgb(220, 133, 84);
        border-radius: 10px;
    }

    html::-webkit-scrollbar-thumb:hover {
        background: rgb(228, 92, 14);
        border-radius: 10px;
    }

    html::-webkit-scrollbar-thumb:active {
        background: rgb(228, 92, 14);
        border-radius: 10px;
    }
</style>

</html>